<template>
	<xn-form-container
		:title="formData.id ? '编辑' : '增加'"
		:width="800"
		:visible="visible"
		:destroy-on-close="true"
		@close="onClose"
	>
		<a-form ref="formRef" :model="formData" :rules="formRules" :label-col="{ style: { width: '100px' } }">
			<div class="title-border pl-2">基础信息</div>
			<div class="flex">
				<a-form-item label="规则名称" name="name">
					<a-input
						v-model:value="formData.name"
						:disabled="formData.defaultFlag === CommonDetermineEnum.YES"
						placeholder="请输入规则名称"
						allow-clear
						style="width: 240px"
					/>
				</a-form-item>
				<a-form-item label="适用范围：" name="suitRange">
					<a-tree-select
						v-model:value="formData.suitRange"
						style="width: 300px"
						:tree-data="orgUserTreeData"
						tree-checkable
						allow-clear
						:show-checked-strategy="SHOW_PARENT"
						placeholder="请选择适用范围"
						tree-node-filter-prop="label"
						:fieldNames="fieldNames"
						max-tag-count="responsive"
						:dropdownMatchSelectWidth="false"
						treeNodeFilterProp="name"
					/>
				</a-form-item>
			</div>

			<div class="title-border pl-2">资源回收规则</div>
			<div>
				<a-form-item
					label="满足以下任一条件，客户将被回收到公海"
					name="highSeasId"
					:label-col="{ style: { width: '300px' } }"
					class="mb-4"
				>
					<a-select
						v-model:value="formData.highSeasId"
						placeholder="请选择公海"
						:options="highSeasOptions"
						allow-clear
						style="width: 240px"
						:disabled="formData.defaultFlag === CommonDetermineEnum.YES"
					/>
				</a-form-item>
				<a-form-item name="noActionFlag" :label-col="{ style: { width: '300px' } }" class="ml-6 mb-4">
					<a-checkbox v-model:checked="formData.noActionFlag">
						获取线索后
						<a-input-number v-model:value="formData.noFollowDays" allow-clear min="1" />
						天内无跟进操作
					</a-checkbox>
				</a-form-item>
				<a-form-item name="noDealFlag" :label-col="{ style: { width: '300px' } }" class="ml-6 mb-4">
					<a-checkbox v-model:checked="formData.noDealFlag">
						获取线索后
						<a-input-number v-model:value="formData.noDealDays" allow-clear min="1" />
						天内未转成客户
					</a-checkbox>
				</a-form-item>
				<a-form-item name="noDealFlag" :label-col="{ style: { width: '300px' } }" class="ml-6">
					<a-checkbox v-model:checked="formData.noReciveFlag">
						线索回收后
						<a-input-number v-model:value="formData.receiveLimitHour" allow-clear min="1" />
						小时内不能进行领取/分配
					</a-checkbox>
				</a-form-item>
			</div>
			<div class="title-border pl-2">跟进操作包括</div>
			<div>
				<a-form-item name="writeFlag" :label-col="{ style: { width: '300px' } }" class="ml-6 mb-1 mt-1">
					<a-checkbox v-model:checked="formData.writeFlag"> 写跟进 </a-checkbox>
				</a-form-item>
				<a-form-item name="callFlag" :label-col="{ style: { width: '300px' } }" class="ml-6">
					<a-checkbox v-model:checked="formData.callFlag">
						外呼
						<a-radio-group v-model:value="formData.callResult" :options="callResultOptions" class="ml-4" />
					</a-checkbox>
				</a-form-item>
			</div>
			<div class="title-border pl-2">回收规则</div>
			<div>
				<a-form-item name="recycleRuleFlag" :label-col="{ style: { width: '300px' } }" class="ml-6 mb-4">
					公海领取的线索回收到所属公海
					<a-switch
						v-model:checked="formData.recycleRuleFlag"
						:checkedValue="CommonSwitchEnum.TRUE"
						:unCheckedValue="CommonSwitchEnum.FALSE"
					/>
				</a-form-item>
			</div>
			<div class="title-border pl-2">领取规则</div>
			<div>
				<a-form-item name="receiveLimitDays" :label-col="{ style: { width: '300px' } }" class="ml-6 mb-4 mt-2">
					<a-input-number v-model:value="formData.receiveLimitDays" allow-clear min="1" />
					天内不能从公海连续领取同一个线索
				</a-form-item>
			</div>
		</a-form>
		<template #footer>
			<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
			<a-button type="primary" :loading="submitLoading" @click="onSubmit">保存</a-button>
		</template>
	</xn-form-container>
</template>

<script setup name="personSwapRuleForm">
	import { required } from '@/utils/formRules'
	import tool from '@/utils/tool'
	import personSwapRuleApi from '@/api/biz/crm/personSwapRuleApi'
	import { CallResultEnum, CommonDetermineEnum, CommonSwitchEnum } from '@/utils/enum'
	import { TreeSelect } from 'ant-design-vue'

	// 定义emit事件
	const emit = defineEmits({ successful: null })
	// 默认是关闭状态
	const visible = ref(false)
	const formRef = ref()
	// 表单数据，也就是默认给一些数据
	const formData = ref({
		suitRange: [],
		noFollowDays: null,
		noDealDays: null,
		receiveLimitHour: null,
		callResult: CallResultEnum.CALLED,
		recycleRuleFlag: CommonSwitchEnum.FALSE,
		receiveLimitDays: null
	})
	// 定义机构元素
	const submitLoading = ref(false)

	const SHOW_PARENT = TreeSelect.SHOW_PARENT
	const fieldNames = {
		label: 'name',
		value: 'id'
	}

	const orgUserTreeData = ref([])
	const highSeasOptions = ref([])
	const callResultOptions = tool.dictList('OUTBOUND_RESULT')

	const orgUserTree = (id) => {
		personSwapRuleApi.clueOrgUserTree({ id }).then((data) => {
			orgUserTreeData.value = data
		})
	}

	const highSeasList = (id) => {
		personSwapRuleApi.clueHighSeasList({ id }).then((data) => {
			highSeasOptions.value = data.map((item) => ({
				label: item.name,
				value: item.id
			}))
		})
	}

	// 打开抽屉
	const onOpen = (record) => {
		visible.value = true

		const id = record ? record.id : null
		orgUserTree(id)
		highSeasList(id)

		if (record) {
			formData.value = Object.assign(
				{},
				{
					...record,
					suitRange: record.suitRange.split(','),
					noActionFlag: record.noActionFlag === CommonDetermineEnum.YES,
					noDealFlag: record.noDealFlag === CommonDetermineEnum.YES,
					noReciveFlag: record.noReciveFlag === CommonDetermineEnum.YES,
					writeFlag: record.writeFlag === CommonDetermineEnum.YES,
					callFlag: record.callFlag === CommonDetermineEnum.YES
				}
			)
		}
	}
	// 关闭抽屉
	const onClose = () => {
		visible.value = false
		formData.value = {
			suitRange: [],
			noFollowDays: null,
			noDealDays: null,
			receiveLimitHour: null,
			callResult: CallResultEnum.CALLED,
			recycleRuleFlag: CommonSwitchEnum.FALSE,
			receiveLimitDays: null
		}
	}
	// 默认要校验的
	const formRules = {
		name: [required('请输入规则名称')],
		suitRange: [required('请选择适用范围')],
		highSeasId: [required('请选择公海')]
	}
	// 验证并提交数据
	const onSubmit = () => {
		formRef.value.validate().then(() => {
			submitLoading.value = true
			const { suitRange, noActionFlag, noDealFlag, noReciveFlag, writeFlag, callFlag, ...other } = formData.value
			personSwapRuleApi
				.submitClueForm(
					{
						...other,
						suitRange: suitRange.join(','),
						noActionFlag: noActionFlag ? CommonDetermineEnum.YES : CommonDetermineEnum.NO,
						noDealFlag: noDealFlag ? CommonDetermineEnum.YES : CommonDetermineEnum.NO,
						noReciveFlag: noReciveFlag ? CommonDetermineEnum.YES : CommonDetermineEnum.NO,
						writeFlag: writeFlag ? CommonDetermineEnum.YES : CommonDetermineEnum.NO,
						callFlag: callFlag ? CommonDetermineEnum.YES : CommonDetermineEnum.NO
					},
					formData.value.id
				)
				.then(() => {
					visible.value = false
					formRef.value.resetFields()
					emit('successful')
				})
				.finally(() => {
					submitLoading.value = false
				})
		})
	}
	// 调用这个函数将子组件的一些数据和方法暴露出去
	defineExpose({
		onOpen
	})
</script>

<style scoped>
	.title-border {
		border-left: 4px solid #0d84ff;
	}
</style>
